<template name="login">
  <action-sheet v-show="actionSheetShow" @change="actionSheetChange">
    <block v-for="(item,index) in wxArray" :key="index">
      <action-sheet-item @tap="item">
        <button v-if="canIUse" style="background: #01cc0e;color: #fff" @getuserinfo="onGotUserInfo" open-type="getUserInfo">{{item}}</button>
        <span v-else>请升级微信版本</span>
      </action-sheet-item>
    </block>
    <action-sheet-cancel>取消</action-sheet-cancel>
  </action-sheet>
</template>
<script>
import { login, showSuccess, showError } from "@/utils/index";
export default {
  data() {
    return {
      userInfo: {},
      wxArray: ["微信登陆"],
      canIUse: wx.canIUse("button.open-type.getUserInfo")
    };
  },
  computed: {
    //必须动态监听
    actionSheetShow() {
      return this.$store.state.actionSheetShow;
    }
  },
  methods: {
    actionSheetChange() {
      this.$store.state.actionSheetShow = false;
    },
    async onGotUserInfo(e) {
      let userInfo = e.mp.detail.userInfo;
      if (userInfo) {
        let data = await login(userInfo);
        if (data.status === 1) {
          wx.setStorageSync("userInfo", data.data);
          this.$store.state.userInfo = data.data;
          showSuccess("登陆成功");
        }
      } else {
        showError("登陆失败");
      }
      this.actionSheetChange();
    }
  }
};
</script>
